import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw,
  createWebHistory,
} from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css"; //$ npm install --save nprogress 或者$ yarn add nprogress
import store from "@/store/index";
import { ElMessage } from "element-plus";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("@/views/home/index.vue"),
    name: "home",
    meta: {
      mark: "public",
      title: "首页",
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    name: "login",
    meta: {
      mark: "public",
      title: "登录",
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/viwe401",
    component: () => import("@/views/viwe401/index.vue"),
    name: "viwe401",
    meta: {
      mark: "public",
      title: "401",
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/viwe404",
    component: () => import("@/views/viwe404/index.vue"),
    name: "viwe404",
    meta: {
      mark: "public",
      title: "404",
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/qrcode",
    component: () => import("@/views/qrcode/index.vue"),
    name: "qrcode",
    meta: {
      mark: "public",
      title: "二维码",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/webSocket",
    component: () => import("@/views/webSocket/index.vue"),
    name: "webSocket",
    meta: {
      mark: "public",
      title: "WebSocket聊天",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/pdfFlow",
    component: () => import("@/views/pdfFlow/index.vue"),
    name: "pdfFlow",
    meta: {
      mark: "public",
      title: "PDF流预览",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/pdfJdk",
    component: () => import("@/views/pdfJdk/index.vue"),
    name: "pdfJdk",
    meta: {
      mark: "public",
      title: "PDF地址预览",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/richText",
    component: () => import("@/views/richText/index.vue"),
    name: "richText",
    meta: {
      mark: "public",
      title: "富文本",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/signature",
    component: () => import("@/views/signature/index.vue"),
    name: "signature",
    meta: {
      mark: "public",
      title: "原生手写签名",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/signatureVue",
    component: () => import("@/views/signatureVue/index.vue"),
    name: "signatureVue",
    meta: {
      mark: "public",
      title: "插件手写签名",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/ganttChart",
    component: () => import("@/views/echarts/ganttChart.vue"),
    name: "ganttChart",
    meta: {
      mark: "public",
      title: "甘特图（看板）",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/nativeTextarea",
    component: () => import("@/views/nativeTextarea/index.vue"),
    name: "nativeTextarea",
    meta: {
      mark: "public",
      title: "手搓textarea",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
  {
    path: "/user",
    component: () => import("@/views/user/index.vue"),
    name: "user",
    meta: {
      mark: "public",
      title: "个人信息",
      show: true, //是否属于组件，显示在首页上的按钮
      type: "primary", // primary,success,info,warning,danger
    } /**请添加：confer: 私有的（涉及权限的），public：公有的（公共页面） */,
  },
];
const router = createRouter({
  history: createWebHistory(), //History模式
  // history: createWebHashHistory(),//hash模式
  // 测试平台仅在开发模式有效
  routes: routes,
});
/**
 * 路由白名单
 * @param whiteList 路由白名单
 * 过滤出不需要拦截的路由
 */
// 路由白名单
const whiteList = ["/viwe401", "/viwe404"];
/**
 * 给浏览器页签添加名字
 *
 * @param pageTitle 路由页面名称
 */
const getPageTitle = (pageTitle: string) => {
  if (pageTitle) return `${pageTitle} | ${import.meta.env.VITE_APP_NAME}`;
  return import.meta.env.VITE_APP_NAME;
};
/**
 * 前置守卫
 * 全局前置守卫是Vue Router提供的一种路由拦截机制，它可以在路由跳转前执行一些逻辑
 * to：即将要进入的目标路由对象。
 *from：当前导航正要离开的路由对象。
 *next：一个函数，调用后表示放行，可以继续往下走。执行效果依赖next方法的调用参数。
 */
router.beforeEach(async (to: any, from: any, next: any) => {
  NProgress.start();
  const tokenObj = store.getters.tokenObj;
  document.title = getPageTitle(to.meta.title);
  if (!tokenObj?.token && to.path === "/login") {
    next();
    NProgress.done();
    return;
  } else if (!tokenObj?.token && to.path !== "/login") {
    if (whiteList.includes(to.path)) {
      next();
      NProgress.done();
      return;
    } else {
      next("/login");
      NProgress.done();
      return;
    }
  } else if (tokenObj?.token && to.path === "/login") {
    next("/");
    NProgress.done();
    return;
  } else {
    if (to.meta?.mark === "confer") {
      // 涉及权限页面的操作
      /* 
      操作数据路由权限控制
      */
      NProgress.done();
      return;
    } else if (to.meta?.mark === "public") {
      next();
      NProgress.done();
      return;
    } else {
      if (whiteList.includes(to.path)) {
        next();
        NProgress.done();
      } else {
        next("/viwe404");
        NProgress.done();
        return;
      }
    }
  }
});

/**
 * 全局守卫
 *afterEach 是 Vue Router 提供的一个全局守卫（也称作钩子函数）之一，
 *afterEach 不会阻止导航，它主要用于一些非阻塞性的后处理，比如修改页面标题、记录访问日志等。
 * to - 即将要进入的目标路由对象。
 * from - 当前导航正要离开的路由对象。
 * next - 一个必须被调用的回调函数。
 */
router.afterEach((to: any, from: any, next: any) => {
  if (to.path == "/" || to.path == "/home") {
    // ElMessage.success("欢迎来到我的代码世界！");
  }
});

export default router;
